<!-- 区域节点 -->

<template>
  <div class="PatrolMap-AreaNode">
    <span :class="nodeClass">{{ data.name }}</span>

    <img v-if="hasRealtime || hasTrack" :src="areaImg" />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import UTIL from '@admin/views/Secure/Patrol/UTIL'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'AreaNode',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [
    CORE.mixWeb(),
    CORE.mixSelect('realtime', 'realtime_'),
    CORE.mixSelect('track', 'track_'),
  ],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 区域的提示图片
     */
    areaImg: () => UTIL.getImg('areaTip.svg'),

    /**
     * 有无实时
     */
    hasRealtime() {
      const { realtime_select, data } = this
      return realtime_select.some((item) => item.areaId === data.id)
    },

    /**
     * 有无轨迹
     */
    hasTrack() {
      const { MAP, DICT, param, track_select, data } = this
      if (param.tab === DICT.TAB[0][0] || !MAP.inTrack) return false
      return track_select.some((item) => item.areaId === data.id)
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
